spb/websensor

1import { Skeleton, SkeletonPanel, SkeletonRows } from "@/components/ui";23export default function Loading() {4  return (5    <>6      <div className="mb-3 flex flex-wrap items-end justify-between gap-3">7        <div className="flex flex-col gap-2">8          <div className="flex items-center gap-2">9            <Skeleton className="h-4 w-20" />10            <Skeleton className="h-3 w-24" />11            <Skeleton className="h-4 w-16" />12            <Skeleton className="h-3 w-32" />13          </div>14          <Skeleton className="h-6 w-56" />15        </div>16        <div className="flex gap-2">17          <Skeleton className="h-7 w-20" />18          <Skeleton className="h-7 w-24" />19        </div>20      </div>21      <div className="mb-3 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line bg-line sm:grid-cols-3 xl:grid-cols-6">22        {Array.from({ length: 6 }, (_, i) => (23          <div key={i} className="flex flex-col gap-1.5 bg-panel px-3 py-2">24            <Skeleton className="h-2.5 w-16" />25            <Skeleton className="h-5 w-12" />26            <Skeleton className="h-2.5 w-24" />27          </div>28        ))}29      </div>30      <div className="panel mb-3 flex flex-wrap items-center gap-4 px-3 py-2">31        <Skeleton className="h-2.5 w-24" />32        <div className="flex flex-wrap gap-[3px]">33          {Array.from({ length: 35 }, (_, i) => (34            <Skeleton key={i} className="size-3 !rounded-[2px]" />35          ))}36        </div>37      </div>38      <div className="mb-3 flex gap-4 border-b border-line pb-2">39        {Array.from({ length: 7 }, (_, i) => (40          <Skeleton key={i} className="h-3 w-14" />41        ))}42      </div>43      <div className="grid gap-4 xl:grid-cols-[1fr_340px]">44        <div className="panel">45          <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-28" /></div>46          <SkeletonRows rows={10} />47        </div>48        <aside className="flex flex-col gap-4">49          <SkeletonPanel lines={6} />50          <SkeletonPanel lines={3} />51          <SkeletonPanel lines={4} />52        </aside>53      </div>54    </>55  );56}57